<template>
  <div class="w-100% h-100%">
    <ProTable
      ref="permsTableRef"
      row-key="id"
      :filters="filters"
      :columns="columns"
      :get-table-data="getTableData"
      custom-id="basic-menu"
    > 
      <template #filter-bottom>
        <el-button @click="addPermission" type="primary">新增</el-button>
      </template>
      <template #column-icon="{ row }">
        <Icon v-if="row.icon" :icon="row.icon" />
      </template>
      <template #column-operate="{ row }">
        <el-button type="primary" link @click="openOperationLog(row.permissionId)">
          <Icon icon="icon-park-outline:history-query" />日志
        </el-button>

        <el-button type="primary" link @click="editPermission(row.permissionId)">
          <Icon icon="carbon:edit" />编辑
        </el-button>

        <el-popconfirm @confirm="deletePermission(row.permissionId)" title="是否确认删除">
          <template #reference>
            <el-button type="danger" link>
              <Icon icon="ep:delete" />删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </ProTable>

    <EditPermission
      ref="EditPermissionRef"
      @submit="refreshData"
    >
    </EditPermission>

    <OperationLogDialog ref="OperationLogDialogRef"></OperationLogDialog>

  </div>
</template>

<script setup lang="ts">
  import { ref, unref, nextTick, watch, reactive } from 'vue'
  import { ElTree, ElInput, ElButton, ElPopconfirm, ElCascader } from 'element-plus'
  import { ProTable, FilterItem, TableColumnItem, Icon } from '@/components'
  import { OperationLogDialog, openOperationLogDialog } from '@/components/operationLog'
  import { listToTree } from '@/utils'
  import { createYesNoEnum } from '@/constants'
  import { selectPermsPageApi, deletePermissionApi } from '@/api/system/permission'
  import { PermsRes } from '@/api/system/permission/types'
  import EditPermission from './components/edit-permission.vue'

  // 资源类型
  const permsTypeEnum = [
    { label: '资源', value: 1 },
    { label: '按钮', value: 2 },
  ]

  const permsTableRef = ref<InstanceType<typeof ProTable>>()
  const EditPermissionRef = ref<InstanceType<typeof EditPermission>>()
  const OperationLogDialogRef = ref<InstanceType<typeof OperationLogDialog>>()

  const filters: FilterItem[] = [
    {
      label: '资源名称',
      prop: 'permsName'
    },
    {
      label: '权限码',
      prop: 'permsCode'
    },
    {
      label: '资源类型',
      prop: 'permsType',
      type: 'select',
      list: permsTypeEnum
    },
    {
      label: '接口地址',
      prop: 'path'
    }
  ]


  const columns: TableColumnItem[] = [
    {
      label: '资源名称',
      prop: 'permsName',
      fixed: 'left',
      clickProps: {
        onclick: (row, event) => {
          EditPermissionRef.value.openDialog(row.permissionId, true)
        },
      }
    },
    {
      label: '资源类型',
      prop: 'permsType',
      list: permsTypeEnum,
      tagType: {
        1: 'info',
        2: 'primary'
      }
    },
    {
      label: '权限码',
      prop: 'permsCode',
    },
    {
      label: '接口地址',
      prop: 'path'
    },
    {
      label: '更新人',
      prop: 'updateByName'
    },
    {
      label: '更新时间',
      prop: 'updateTime'
    },
    {
      label: '操作',
      slot: 'column-operate',
      width: 200
    },
  ] 

  const getTableData = async (params) => {
    return (await selectPermsPageApi(params)).data
  }

  const refreshData = () => {
    permsTableRef.value.refreshData()
  }


  // 新增资源
  const addPermission = () => {
    EditPermissionRef.value.openDialog()
  }


  // 查看日志
  const openOperationLog = (permissionId) => {
    // OperationLogDialogRef.value.openDialog(permissionId)
    openOperationLogDialog(permissionId)
  }
  // 编辑资源
  const editPermission = (permissionId) => {
    EditPermissionRef.value.openDialog(permissionId)
  }

  // 编辑资源
  const deletePermission = async (permissionId) => {
    await deletePermissionApi({ permissionId })
    refreshData();
  }

</script>

